<template>
    <div id="threeWrpp">666</div>
</template>

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { onMounted } from 'vue';

// 创建3d场景对象scene
const scene = new THREE.Scene();
// 创建材质(长方体BoxGeometry,圆柱体CylinderGeometry,球体SphereGeometry,圆柱体CylinderGeometry,平面Geometry,点Geometry,线Geometry,面Geometry)
// 先创建形状，这里是圆柱体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 0, 0);
// 将几何体添加到场景中
scene.add(cube);
// 想要观看到我们创建的3d物品，现在开始创建相机------------------------
// 视角，宽高比，近平面，远平面
// 75：相机视场角度，window.innerWidth / window.innerHeight：相机长宽比，0.1：相机距离原点的最近距离，1000：相机距离原点的最远距离
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
// 相机位置
camera.position.set(-500, 0, 0);
// 相机观察目标的位置，3d坐标
camera.lookAt(0, 0, 0);
scene.add(camera);
// AxesHelper：辅助观察的坐标系,辅助线长度
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

// 定义渲染器(画布)，这里理解就是相机现在正在对着你的物品，它要给物品拍照(渲染器)，然后把这个照片给你看，你要定义照出来的照片大小
const renderer = new THREE.WebGLRenderer();
// const width = 800; //宽度
// const height = 500; //高度
// 这里以窗口宽高为画布宽高
renderer.setSize(window.innerWidth, window.innerHeight);
// 生成画布(照片),添加场景和相机
renderer.render(scene, camera);
// document.body.appendChild(renderer.domElement);

onMounted(() => {
    document.getElementById('threeWrpp').appendChild(renderer.domElement);
});
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 动态运动物体,定义一个动态函数
function render() {
    if (cube.position.x > 13) {
        cube.position.x = 0;
    }
    cube.position.x += 0.01;
    renderer.render(scene, camera);
    //   渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render);
}
render();
</script>

<style lang="scss" scoped>
</style>

